<template>
  <view class="activity-detail-page">
    <view class="activity-title u-line-1">
      {{ info.channelName || "" }}
    </view>
    <view
      class="u-content"
      :style="{
        paddingBottom: info.showText
          ? 'calc(24rpx + 120rpx + env(safe-area-inset-bottom))'
          : 'calc(24rpx + env(safe-area-inset-bottom))',
      }"
    >
      <u-parse :content="info.articleText" :tagStyle="parseStyle"></u-parse>
    </view>

    <view class="btn-box" v-if="info.showText">
      <view class="appointment-btn" @click="save">{{ info.showText }}</view>
    </view>
  </view>
</template>

<script>
import { getNoticeDetail } from "@/config/api.js";

export default {
  props: ["id"],
  data() {
    return {
      showProp: false,
      xuzhiDesc: "",
      appointmentDate: [],
      ticketList: [],
      info: {},
      ticketPics: [],
    };
  },
  onLoad() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      getNoticeDetail({
        _id: this.id,
      }).then(({ code, data }) => {
        if (code == 200) {
          this.info = data;
        }
      });
    },
    //首页跳转
    save() {
      if (this.info.butLinkType == "0") {
        if (this.info.butLinkUrl) {
          uni.navigateTo({
            url: this.info.butLinkUrl,
          });
        }
      } else {
        // 外部链接
        uni.navigateTo({
          url: `/pages/web/index?url=${this.info.butLinkUrl}`,
        });
      }
    },
  },
};
</script>

<style lang="scss">
.activity-detail-page {
  min-height: 100vh;

  .activity-title {
    padding: 24rpx 32rpx 0;
    font-size: 36rpx;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.9);
    line-height: 50rpx;
  }

  .u-content {
    padding: 20rpx 32rpx 0;
    font-size: 28rpx;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.7);
    text-align: justify;
    line-height: 1.5;
  }

  .btn-box {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: 0rpx 14rpx 58rpx 0rpx rgba(100, 100, 111, 0.2);
    height: 120rpx;
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: content-box;
    .appointment-btn {
      width: 686rpx;
      height: 80rpx;
      background: #ff5000;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      margin: 0 auto;
      text-align: center;
      font-size: 28rpx;
      font-weight: 600;
      color: #ffffff;
      line-height: 80rpx;
    }
  }

  .xuzhi-title {
    padding-top: 24rpx;
    text-align: center;
  }

  .xuzhi-desc {
    padding: 24rpx;
  }
}
</style>
